<template>
	<view class="spot_information" >
		<!-- 加载顶部导航搜索栏 3、使用组件 -->
		<NavbarSpot></NavbarSpot>
		<view v-for="(item,index) in spot" :key="index">
			<view class="spot_banner_box">
				<!-- swiper 轮播图 -->
				<!-- indicator-dots 是否轮播 -->
				<!-- autoplay 自动播放 -->
				<!-- interval 轮播时间 -->
				<!-- duration 动画执行周期 -->
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<!-- <swiper-item v-for="(item,index) in spot" :key="index">
						<image class="banner" :src="item.spotImage1" mode="scaleToFill"></image>
					</swiper-item> -->
					<!-- 轮播图呈现的模块 -->
					<!-- item 作为元素, index 作为下标, 遍历的是 spot, 要添加 key 作为每个元素的索引 -->
					<swiper-item>
						<image class="banner" :src="item.spotImage1" mode="scaleToFill"></image>
					</swiper-item>
					<swiper-item >
						<image class="banner" :src="item.spotImage2" mode="scaleToFill"></image>
					</swiper-item>
					<swiper-item >
						<image class="banner" :src="item.spotImage3" mode="scaleToFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 景点名称 -->
			<view class="spot_name">{{ item.spotName }}</view>
			<!-- 景点简介 -->
			<view class="spot_introduction">{{ item.spotIntroduction }}</view>
			<!-- 观景路线 -->
			<view class="spot_line">
				<text>推荐观景路线：</text>
				{{ item.spotLine }}
			</view>
		</view>
	</view>
</template>

<script>
	//加载顶部导航搜索栏 1、引用组件
	import NavbarSpot from "../../../uni_modules/navbar/navbar_spot.vue"
	//引入http-types方法
	import httpTypes from '@/js/http-types.js'
	
	export default {
		data() {
			return {
				//获取后台数据 1.声明存储数据的方式
				//获取到的数据不止一个，所以是数组类型
				spot:[],
				id:''
			}
		},	
		onLoad() {
			
		},
		methods: {
			
		},
		//获取上一个页面传过来的参数id
		onLoad:function(option){
			this.id = option.id;
		},
		//获取后台数据 2.声明一个 mounted 的周期函数
		//在这里获取数据,写一个网络请求
		mounted() {
			//通过 uni.request 做网络请求
			httpTypes.request({
				url: 'admin/spot/getSpot/'+this.id,//接口地址
				method:'GET',
				success:(res) => {
					this.spot = res.data.data;
				}
			});
		},
		//加载顶部导航栏 2、组件注入的形式NavbarSpot
		components:{
			NavbarSpot,
		}
	}
</script>

<style lang="scss">
	body{
		background-color: #F8F8F8;
	}
	
	.spot_information{
		display: flex;             //弹性盒子模型
		flex-direction: column;    //垂直排列
		flex:1;                    //宽度充满全屏
		overflow: hidden;          //超出部分隐藏
		.spot_banner_box{
			display: flex;         //弹性盒子模型
			width: 100%;
			padding: 10px;
			justify-content: center;//水平居中
			align-items: center;    //垂直居中
			border-radius: 20px;     //圆角效果
			overflow: hidden;          //超出部分隐藏
			.swiper{
				width: 100%;
				height: 260rpx;
				.banner{
					width: 700rpx;
					height: 260rpx;
				}
			}
		}
		
		.spot_name{
			padding: 10px 8%;
			text-align: right;       //文字水平居中 
			white-space: nowrap;     //文本强制不换行
			text-overflow: ellipsis; //文本溢出显示省略号
			overflow: hidden;        //溢出的部分隐藏
			font-family: "楷体";
			font-size: 38px;
			font-weight:bold;
			
			background-image: -webkit-linear-gradient(bottom, #D16BA5, #86A8E7, #5FFBF1); //为文本元素提供渐变背景
			-webkit-background-clip: text;        //用文本剪辑背景，用渐变背景作为颜色填充文本。
			-webkit-text-fill-color: transparent; //使用透明颜色填充文本。
		}
		
		.spot_introduction{
			padding: 5px;
			margin: 0 20px;
			text-indent:2em;
			font-family: "楷体";
			font-size: 18px;
		}
		
		.spot_line{
			padding: 5px;
			margin: 10px 20px;
			font-family: "楷体";
			font-size: 18px;
		}
		
	}
</style>
